<script lang="ts">
  import { Dynamic } from '@/api/dynamic';
  import { ROUTER_PATHS, useRouter } from '@/constants/router';
  import { DNYMIC_LIKE_STATUS, FOLLOW_STATUS } from '@/enum/dynamic.enum';
  import { computed, defineComponent, PropType } from '@vue/composition-api';
  import DynamicCard from './dynamic-card.vue';

  type PropsType = {
    list: Dynamic[];
  };
  export default defineComponent({
    components: {
      DynamicCard
    },
    props: {
      list: {
        type: Array as PropType<PropsType['list']>,
        require: true,
        default: () => {
          return [
            {
              createTime: '',
              userInfo: {
                nickName: '什么东西？'
              },
              updateTime: '',
              views: 0,
              userId: 0,
              content: '',
              id: 0,
              images: '',
              type: 0,
              love: 0,
              comment: 0,
              loveStatus: DNYMIC_LIKE_STATUS.NOT_LIKED,
              followStatus: FOLLOW_STATUS.NOT_FOLLOW
            },
            {
              createTime: '',
              userInfo: {
                nickName: '你好啊'
              },
              updateTime: '',
              views: 0,
              userId: 0,
              content: '',
              id: 0,
              images: '',
              type: 0,
              love: 0,
              comment: 0,
              loveStatus: DNYMIC_LIKE_STATUS.NOT_LIKED,
              followStatus: FOLLOW_STATUS.NOT_FOLLOW
            },
            {
              createTime: '',
              userInfo: {
                nickName: '完蛋'
              },
              updateTime: '',
              views: 0,
              userId: 0,
              content: '',
              id: 0,
              images: '',
              type: 0,
              love: 0,
              comment: 0,
              loveStatus: DNYMIC_LIKE_STATUS.NOT_LIKED,
              followStatus: FOLLOW_STATUS.NOT_FOLLOW
            }
          ] as PropsType['list'];
        }
      }
    },
    setup(props) {
      const router = useRouter();
      const last = computed(() => {
        return props.list.length || 0;
      });
      function toDynamicDetail(item: Dynamic) {
        router.navigateTo({
          url: ROUTER_PATHS.DYNAMIC_DETAIL,
          params: {
            id: item.id
          }
        });
      }
      return {
        last,
        toDynamicDetail
      };
    }
  });
</script>

<template>
  <view class="dynamic-list">
    <template v-for="(item, index) in list">
      <view class="dynamic-card" :key="index" @click.stop="toDynamicDetail(item)">
        <dynamic-card :detail="item" :dynamicId="item.id" />
        <view class="line" v-if="index !== last"></view>
      </view>
    </template>
  </view>
</template>

<style lang="scss" scoped>
  .line {
    margin: 24rpx 0 24rpx 20rpx;
    height: 1rpx;
    background: #f9f9f9;
  }
</style>
